<template>
  <a-spin :spinning="spinning">
    <div class="main">
      <a-card title="调样申请" :loading="loading">
        <template #extra>
          <a-button type="primary" @click="onSubmit" :disabled="disabled" style="margin-left:10px">保存</a-button>
        </template>
        <a-form-model :model="form" labelAlign="right" :rules="rules" ref="ruleForm" :labelCol="{ span: 10 }"
          :wrapperCol="{ span: 14 }">
          <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="调样编号">
                {{ form.billno }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="产品编号">
                <a-input placeholder="请输入产品编号" v-model="form.sccode" @blur="loadLowercode"/>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="产品大类">
                {{ form.scdlvalue }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="状态">
                <!-- <span v-if="form.status == 10">草稿</span>
                <span v-else-if="form.status == 20">启用</span>
                <span v-else-if="form.status == 30">停用</span>
                <span v-else-if="form.status == 40">无效</span> -->
                <span v-if="form.flag == 'N'">草稿</span>
                <span v-if="form.flag == 'Y'">已审核</span>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="产品名称" prop="scname">
                {{ form.scname }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="产品规格">
                {{ form.scspec }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="平方克重">
                {{ form.scmlkz }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="产品成份">
                {{ form.sccf }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="有效门幅">
                {{ form.scmf }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="订单类型">
               {{form.ordertype}}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="上货季" prop="scseason">
                {{form.scseasonvalue}}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              {{form.ordercdh}}
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="下单日期">
               {{form.date1}}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="申请总数量">
               {{form.ordersl}}
              </a-form-model-item>
            </a-col>
           
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
            </a-col>
          
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="调样厂商">
                {{ form.scsupName }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="厂商编号">
                <a-input placeholder="请输入厂商编号" v-model="form.sccshh" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="调样价格">
                <a-input placeholder="请输入调样价格" v-model="form.scprice" type="number" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="价格单位">
                <!-- <a-input placeholder="请输入价格单位" v-model="form.scpricetype" /> -->
                <a-select allow-clear v-model="form.scpricetype" placeholder="请选择价格单位" style="width:100%">
                  <a-select-option :key="'1'" :value="'1'">
                    元/米
                  </a-select-option>
                  <a-select-option :key="'2'" :value="'2'">
                    元/码
                  </a-select-option>
                  <a-select-option :key="'3'" :value="'3'">
                    元/公斤
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="放样周期">
                <a-input placeholder="请输入放样周期" v-model="form.vc14"/>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="采购员">
                <a-input placeholder="请输入采购员" v-model="form.scorder" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="总计费用">
                <!-- <a-input placeholder="请输入总计费用" v-model="sumprice"/> -->
                {{ sumprice }}
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="结算修改日期">
                <a-date-picker v-model="form.isjsmodate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
              <a-form-model-item label="质量记录" :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
                <a-input placeholder="请输入质量记录" v-model="form.vc12" type="textarea" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
              <a-form-model-item label="检测意见" :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
                <a-input placeholder="请输入检测意见" v-model="form.vc5" type="textarea" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
            </a-col>
            
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="是否货款提货">
                <a-select allow-clear v-model="form.isdkth" placeholder="请选择是否货款提货" style="width:100%">
                  <a-select-option :key="'Y'" :value="'Y'">
                    是
                  </a-select-option>
                  <a-select-option :key="'N'" :value="'N'">
                    否
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="是否做过大货">
                <a-select allow-clear v-model="form.vc3" placeholder="请选择是否做过大货" style="width:100%">
                  <a-select-option :key="'Y'" :value="'Y'">
                    是
                  </a-select-option>
                  <a-select-option :key="'N'" :value="'N'">
                    否
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="是否需要结算">
                <a-select allow-clear v-model="form.isjs" placeholder="请选择是否需要结算" style="width:100%">
                  <a-select-option :key="'Y'" :value="'Y'">
                    是
                  </a-select-option>
                  <a-select-option :key="'N'" :value="'N'">
                    否
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
              <a-form-model-item label="	是否结算修改">
                <a-select allow-clear v-model="form.isjsmod" placeholder="请选择是否结算修改" style="width:100%">
                  <a-select-option :key="'Y'" :value="'Y'">
                    是
                  </a-select-option>
                  <a-select-option :key="'N'" :value="'N'">
                    否
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>


        </a-form-model>
      </a-card>
      <a-card>
        <color v-show="current == 0" :colorList="colorList" :sccode="sccode" :scprice="form.scprice" @changeColor="changeColor"></color>
      </a-card>
    </div>
  </a-spin>
</template>
  
<script>
import color from './color.vue'
import { getSampleInfo, orderupdate, ordersave, getDictChildList, orderinfo } from '@api/material/index'
export default {
  components: {
    color,
  },
  data() {
    return {
      sccode: '',
      loading: false,
      disabled: false,
      billno: '',
      scseasonList: [],
      typeList: [{ value: 1, title: '调样' }, { value: 2, title: '扩色' }, { value: 3, title: '开发部调样' }, { value: 4, title: '生产部调样' }, { value: 5, title: '套色' }],
      spinning: false,
      taxRate: '',
      current: 0,
      sumprice:null,
      urlKey: 'basemgt-material/',
      form: {
        sccode: '',
        scdlValue: '',
        scdl: '',
        status: '',
        scname: '',
        scspec: '',
        scmlkz: '',
        sccf: '',
        scmf: '',
        scsupName: '',
        scsupid: '',
        scprice: '',
        sccshh: '',
        ordertype: undefined,
        scseason: undefined,
        ordercdh: '',
        date1: '',
        memo1: '',
        inputor: '',
        inputdate: '',
        auditor: '',
        auditdate: '',
        detail: [],
      },
      rules: {
        scseason: [{ required: true, message: '请输入对应上货季', trigger: 'change' }],
      },
      colorList: [],
    }
  },
  watch: {
    // sccode(newVal, oldVal) {
    //   if (newVal && newVal !== oldVal) {
    //     this.loadAcc(newVal)
    //   }
    // },
  },
  created() { },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    },
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  mounted() {
    this.getDictChildList()
    if (this.$route.query.billno) {
      this.billno = this.$route.query.billno
      this.loadAcc()
    }
  },
  methods: {
    filterOption(input, option) {
      if (option && option.props && option.props.title) {
        return option.props.title === input || option.props.title.indexOf(input) !== -1
      } else {
        return true
      }
    },
    changeColor(colorList) {
      this.colorList = colorList
      this.sumprice = null
      this.colorList.map((item)=>{
        this.sumprice = this.sumprice + (item.num11*this.form.scprice + item.num7)
      })
    },
    async loadLowercode() {
      const res = await getSampleInfo({ sccode: this.form.sccode })
      if (res.code == 200) {
        this.form.scdlValue = res.data.scdlValue
        this.form.scdl = res.data.scdl
        this.form.status = res.data.status
        this.form.scname = res.data.scname
        this.form.scspec = res.data.scspec
        this.form.sccf = res.data.sccf
        this.form.scsupName = res.data.scsupName
        this.form.scsupid = res.data.scsupid
        this.form.scprice = res.data.scprice
        this.form.sccshh = res.data.sccshh
        this.sccode = this.form.sccode
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('查找产品失败！')
        }
      }
    },
    async getDictChildList() {
      const params = {
        name: 'SEASON',
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this.scseasonList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取数据字典失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取数据字典失败！')
      }


    },

    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.save()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async save() {
      this.spinning = true
      const params = this.form
      params.detail = this.colorList
      console.log(params);
      try {
        this.form.jobNumber = this.jobNumber
        this.form.inputor = this.userInfo.realname
        let res = this.form.billno ? await orderupdate(this.form) : await ordersave(this.form)
        if (res.code == 200) {
          this.$message.success('保存成功！')
          if (!this.form.billno) {
            this.billno = res.data.billno
          }
          this.$nextTick(() => {
            this.loadAcc()
          })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('保存失败！')
          }

        } this.spinning = false
      } catch (error) {
        this.spinning = false

        this.$message.error('保存失败！')
      }
    },
    async loadAcc() {
      this.loading = true
      const params = {
        billno: this.billno,
        // jobNumber:this.jobNumber,
        // ordertype:1,
        // sccode:this.form.sccode
      }
      this.$http({
        url: 'api/gateway/basemgt-material/cloth-order/orderinfo',
        method: 'post',
        params: params
      })
        .then(res => {
          if (res.code == 200) {
            this.form = res.data
            this.sccode = this.form.sccode
            this.colorList = this.form.detail
            this.colorList.map((item)=>{
        this.sumprice = this.sumprice + (Number(item.num11)*Number(this.form.scprice) + Number(item.num7))
      })
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('获取详情失败！')
            }
            this.disabled = true

          }
        })
      this.loading = false

    },

  }
}
</script>
<style>
.tableHiddle {
  display: none;
}

.tableShow {
  display: revert;
}
</style>